<template>
  <div class="app-container">
    <wise-crud ref="wise-crud" :urls="urls" :fields="fields" :handle="handle">
      <template slot="outHandle">
        <el-button type="primary" @click="handleAdd()"><i class="el-icon-plus" />添加</el-button>
      </template>
      <!-- <template v-slot:handle="slotProps">
        <el-button type="success" size="small" class="activeBtn" round
          @click.native.prevent="settingHandle(slotProps.row)">设置角色</el-button>
      </template> -->
    </wise-crud>
    <!-- add -->
    <el-dialog title="新增" :visible.sync="drawer" width="50%">
      <el-form ref="ruleForm" :model="obj" :rules="rules" label-width="100px" class="wise-form member-form">
        <!-- <el-form-item label="部门" prop="baseOrgId">
          <el-select v-model="obj.baseOrgId" placeholder="请选择">
            <el-option
              v-for="item in options1"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item label="成员" prop="userIds">
          <el-select v-model="obj.userIds" multiple placeholder="请选择">
            <el-option
              v-for="item in options2"
              :key="item.value"
              :label="item.label"
              :value="item.value"
              :disabled="item.becomeMenber"
            />
          </el-select>
        </el-form-item> -->
        <el-form-item>
          <el-button type="primary" @click="submitForm('ruleForm')">确 定</el-button>
          <el-button @click="drawer = false">取 消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
  import WiseCrud from '@/components/Crud/wiseCrud'
  import {
    postHandle
  } from '@/api'
  export default {
    name: 'VehicleInformation',
    components: {
      WiseCrud
    },
    data() {
      return {
        drawer: false,
        drawer1: false,
        handle: ['search'],
        urls: {
          list: '/api/v1/welder-uac-second/space-organization-member-comb/get-member-list',
          add: '/api/v1/welder-sbtx-second/vehicle-information-comb/create-vehicle-information',
          show: '/api/v1/welder-uac-second/space-organization-member-comb/show-member/',
          update: '/api/v1/welder-sbtx-second/vehicle-information/update/',
          delete: '/api/v1/welder-uac-second/space-organization-member-comb/remove-member/'
        },
        fields: [{
            label: '序号',
            type: 'index',
            use: ['table']
          },
          {
            label: '姓名',
            prop: 'username',
            type: 'render',
            labelWidth: '130px',
            tableRender: (h, row, index) => {
              return h('div', row.userInfo ? row.userInfo.username : '')
            },
            viewRender: (h, item, object) => {
              return h('div', object.userInfo ? object.userInfo.username : '')
            },
            use: ['table', 'view', 'search']
          },
          {
            label: '联系电话',
            prop: 'phone',
            type: 'render',
            labelWidth: '130px',
            tableRender: (h, row, index) => {
              return h('div', row.userInfo ? row.userInfo.phone : '')
            },
            viewRender: (h, item, object) => {
              return h('div', object.userInfo ? object.userInfo.phone : '')
            },
            use: ['table', 'view', 'search']
          },
          {
            label: '部门',
            prop: 'name',
            type: 'render',
            labelWidth: '130px',
            tableRender: (h, row, index) => {
              return h('div', row.baseOrgInfo ? row.baseOrgInfo.name : '')
            },
            viewRender: (h, item, object) => {
              return h('div', object.baseOrgInfo ? object.baseOrgInfo.name : '')
            },
            use: ['table', 'view', 'search']
          },
          {
            label: '操作',
            type: 'handle',
            use: ['table'],
            handle: ['view', 'delete'],
            tableWidth: 250
          }
        ],
        departlist: [],
        options1: [],
        options2: [],
        total: 0,
        page: {
          p: 1,
          ps: 5
        },
        filterMethod(query, item) {
          return item.name.indexOf(query) > -1
        },
        userInfo: {},
        objs: {
          roleCodes: []
        },
        roleList: [],
        rules2: {
          roleCodes: [{
            type: 'array',
            required: true,
            message: '请选择角色',
            trigger: 'blur'
          }]
        },
        obj: {
          baseOrgId: '',
          userIds: []
        },
        rules: {
          baseOrgId: [{
            required: true,
            message: '请选择部门',
            trigger: 'blur'
          }],
          userIds: [{
            required: true,
            message: '请选择人员',
            trigger: 'blur'
          }]
        }
      }
    },
    computed: {
      space() {
        return this.$store.state.user.space
      }
    },
    created() {},
    methods: {
      handleAdd() {
        this.obj = {
          baseOrgId: null,
          userIds: []
        }
        // this.getdepartList();
        // this.getmemberList();
        this.drawer = true
      },

      getmemberList() {
        const req = {
          d: {
            filters: [{
              field: 'becomeMenber ',
              operator: 'EQUALS',
              value: false
            }],
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        postHandle(
            '/api/v1/welder-uac-second/user-information-comb/get-user-info-valid-list',
            req
          )
          .then((response) => {
            this.options2 = []
            let data = response.result
            data.forEach((item) => {
              if (!item.becomeMenber) {
                this.options2.push({
                  value: item.userId,
                  label: item.username,
                  becomeMenber: item.becomeMenber
                })
              }
            })
          })
          .catch((error) => {
            this.loading = false
            const data = error.response.data
            for (const key in data) {
              this.$message.error(this.$t(key + '.' + data[key]))
            }
          })
      },
      submitForm(formName) {
        const req = {
          obj: this.obj
        }
        this.$refs[formName].validate((valid) => {
          if (valid) {
            postHandle(
                `/api/v1/welder-uac-second/space-organization-member-comb/create-member-batch-for-userid/`,
                req
              )
              .then((response) => {
                this.drawer = false
                this.$message('操作成功')
                this.$refs['wise-crud'].handleSearch()
              })
              .catch((error) => {
                this.loading = false
                const data = error.response.data
                for (const key in data) {
                  this.$message.error(this.$t(key + '.' + data[key]))
                }
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      },
      settingHandle(row) {
        this.objs.roleCodes = []
        this.userInfo = row
        this.getUserRoleList(row.userId)
        this.getRoleList()
        this.drawer1 = true
      },
      getRoleList() {
        const req = {
          d: {
            filters: [],
            fields: [],
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        postHandle('/api/v1/welder-uac-second/role-comb/get-list', req).then(
          (response) => {
            this.roleList = response.result
          }
        )
      },
      getUserRoleList(userId) {
        const req = {
          d: {
            filters: [],
            fields: [],
            page: {
              p: 1,
              ps: 9999
            }
          }
        }
        postHandle(
          `/api/v1/welder-uac-second/user-role-comb/get-user-role-by-userid/${userId}`,
          req
        ).then((response) => {
          let data = response.result
          if (data && data.length > 0) {
            this.objs.roleCodes = data.map((item) => item.roleCode)
          }
        })
      },
      resetForm(formName) {
        this.$refs[formName].resetFields()
      },
      submitForm2(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            postHandle(
                `/api/v1/welder-uac-second/user-role-comb/configure-user-role/${this.userInfo.userId}`, {
                  obj: this.objs
                }
              )
              .then((response) => {
                this.drawer1 = false
                this.$message('操作成功')
                this.$refs['wise-crud'].handleSearch()
              })
              .catch((error) => {
                const data = error.response.data
                for (const key in data) {
                  this.$message.error(this.$t(key + '.' + data[key]))
                }
              })
          } else {
            console.log('error submit!!')
            return false
          }
        })
      }
    }
  }
</script>

<style>
</style>